<template>
    <ak-title>AKjs前端框架 > 下载</ak-title>

    <ak-main>
        <section class="wm_94 bg_white pa_2 mt_2rem ovh pos_rel">
            <div class="fl w_50">
                <table class="bor_top bor_bottom bor_gray_ddd ">
                    <thead class="text_al_c list_h_3rem bor_gray_ccc border bg_gray_eee">
                    <tr>
                        <th class="font_bold">商品名称</th>
                        <th class="font_bold">价格</th>
                        <th class="font_bold">积分</th>
                        <th class="font_bold">操作</th>
                    </tr>
                    </thead>
                    <tbody class="c_gray_777 text_al_c list_h_6rem bor_top bor_gray_ddd">
                    <tr class="bor_bottom bor_gray_ddd">
                        <td>
                            <img src="img/tibet-1.jpg" class="wh_3rem" />
                            <span class="ml_05rem">面包</span>
                        </td>
                        <td>
                            5元/kg
                        </td>
                        <td>
                            25
                        </td>
                        <td>
                            <button type="button" class="plug_fly bg_theme c_white bor_rad_2rem w_65 h_24rem">加入购物车</button>
                        </td>
                    </tr>
                    <tr class="bor_bottom bor_gray_ddd">
                        <td>
                            <img src="img/tibet-2.jpg" class="wh_3rem" />
                            <span class="ml_05rem">面包</span>
                        </td>
                        <td>
                            5元/kg
                        </td>
                        <td>
                            45
                        </td>
                        <td>
                            <button type="button" class="plug_fly bg_theme c_white bor_rad_2rem w_65 h_24rem">加入购物车</button>
                        </td>
                    </tr>
                    <tr class="bor_bottom bor_gray_ddd">
                        <td>
                            <img src="img/tibet-3.jpg" class="wh_3rem" />
                            <span class="ml_05rem">面包</span>
                        </td>
                        <td>
                            5元/kg
                        </td>
                        <td>
                            60
                        </td>
                        <td>
                            <button type="button" class="plug_fly bg_theme c_white bor_rad_2rem w_65 h_24rem">加入购物车</button>
                        </td>
                    </tr>
                    <tr class="bor_bottom bor_gray_ddd">
                        <td>
                            <img src="img/tibet-4.jpg" class="wh_3rem" />
                            <span class="ml_05rem">面包</span>
                        </td>
                        <td>
                            5元/kg
                        </td>
                        <td>
                            88
                        </td>
                        <td>
                            <button type="button" class="plug_fly bg_theme c_white bor_rad_2rem w_65 h_24rem">加入购物车</button>
                        </td>
                    </tr>
                    <tr class="bor_bottom bor_gray_ddd">
                        <td>
                            <img src="img/tibet-5.jpg" class="wh_3rem" />
                            <span class="ml_05rem">面包</span>
                        </td>
                        <td>
                            5元/kg
                        </td>
                        <td>
                            120
                        </td>
                        <td>
                            <button type="button" class="plug_fly bg_theme c_white bor_rad_2rem w_65 h_24rem">加入购物车</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="fl w_50">
                <dl class="pos_rel ovh mb_1rem">
                    <dt class="fl ovh w_10 text_ind_2rem">
                        <span class="line_h_26rem">邮箱：</span>
                    </dt>
                    <dd class="fl ovh bor_gray_ccc border bor_rad_03rem w_80 h_26rem">
                        <input type="text" data-type="alpha_number" id="plug_complete_email" class="fl pos_rel z_index_1 bg_none w_100 text_ind_1rem c_gray_777 line_h_26rem" value="" placeholder="">
                    </dd>
                </dl>
                <dl class="pos_rel ovh mb_1rem">
                    <dt class="fl ovh w_10 text_ind_2rem">
                        <span class="line_h_26rem">时间：</span>
                    </dt>
                    <dd class="fl ovh bor_gray_ccc border bor_rad_03rem w_80 h_26rem">
                        <input type="text" data-type="number" id="plug_complete_time" class="fl pos_rel z_index_1 bg_none w_100 text_ind_1rem c_gray_777 line_h_26rem" value="" placeholder="">
                    </dd>
                </dl>
                <dl class="pos_rel ovh mb_1rem">
                    <dt class="fl ovh w_10 text_ind_2rem">
                        <span class="line_h_26rem">域名：</span>
                    </dt>
                    <dd class="fl ovh bor_gray_ccc border bor_rad_03rem w_80 h_26rem">
                        <input type="text" data-type="alpha_number" id="plug_complete_domain" class="fl pos_rel z_index_1 bg_none w_100 text_ind_1rem c_gray_777 line_h_26rem" value="" placeholder="">
                    </dd>
                </dl>
                <canvas id="plug_clock" width="180" height="180" class="center mt_3 bg_gray_f5f"></canvas>
            </div>
        </section>
        <section class="w_30 right_0 pos_fix bottom_0 ovh mb_24rem">
            <dl class="w_100 ovh bg_white border bor_gray_ddd">
                <dt class="fl w_70 line_h_3rem text_al_r">
                    合计： <span class="c_close mr_4rem font_bold">￥600.00</span>
                </dt>
                <dd class="fl w_30" id="plug_end">
                    <button type="button" class="bg_close c_white w_100 h_3rem">立即付款</button>
                </dd>
            </dl>
        </section>
    </ak-main>
</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域

    /*-----------------------------------------------AKjs_TimeClock 使用方法-------------------------------------------*/
    $(function() {
        $("#plug_clock").AKjs_TimeClock({
            hCol: '#555',// 时针颜色
            mCol: '#555',// 时针颜色
            sCol: 'red', // 时针颜色
            isNumCol: '#000', // 数字所在的点颜色
            noNumCol: '#999',// 非数字所在的点颜色
            dCol: '#000'// 中心圈颜色
        });
    });

    /*-----------------------------------------------AKjs_Flying 使用方法-------------------------------------------*/
    $(function($) {
        $(".plug_fly").click(function(event){   //是$(".addcar")这个元素点击促发的 开始动画的位置就是这个元素的位置为起点
            var SelfElem = $(this); //当前被点击的按钮元素
            var EndElem = $("#plug_end"); //结束的地方的元素
            var ImgSrc = SelfElem.parents("tr").find('img').attr('src');
            var flyer = $('<img class="pos_fix wh_4rem border bor_gray_ddd bor_rad_50 z_index_10" src="'+ImgSrc+'" />');
            //flyer.play(); //autoPlay: false后，手动调用运动
            SelfElem.addClass("disabled").unbind('click'); //禁止重复点击按钮
            flyer.AKjs_Flying({
                start: {
                    left: event.pageX, //开始位置（必填）#fly元素会被设置成position: fixed
                    top: event.pageY - SelfElem.outerHeight()*2 //开始位置（必填）
                },
                end: {
                    left: EndElem.offset().left - EndElem.outerHeight()*2, //结束位置（必填）
                    top: EndElem.offset().top + EndElem.outerHeight(),  //结束位置（必填）
                    width: 0, //结束时高度
                    height: 0 //结束时高度
                },
                autoPlay: true, //是否直接运动,默认true
                speed: "1.1", //越大越快，默认1.2
                vertex_Rtop: 20, //运动轨迹最高点top值，默认20
                onEnd: function(){
                    this.destroy(); //移除dom
                }
            });
        });
    });

    /*-----------------------------------------------AKjs_Completer 使用方法-------------------------------------------*/
    $(function(){
        $("#plug_complete_email").AKjs_Completer({
            showCallBack: function(val,input,list) { //实时输入值回调入口（实时输入的值，输入框，下拉框元素）
                console.log(val);
            },
            itemSelected: function(val,input,list) { //选择值的回调入口（选择的值，输入框，下拉框元素）
                console.log(val);
            },
            separator: "@", //分离符号
            position: 'bottom', //显示位置 top,bottom
            zIndex: 10, //元素的堆叠顺序
            suggest: false, //是否开启模糊搜索功能
            selectedClass: 'bg_theme c_white', //下拉列表滑动和被选中状态的样式
            source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"], //分离符号后缀数据
        });
    });
    $(function(){
        $("#plug_complete_time").AKjs_Completer({
            filter: function(val) { //滤波器回调
                val = val.replace(/\D/g, "").substr(0, 2);
                if (val) {
                    val = parseInt(val, 10) || 0;
                    val = val > 23 ? 23 : val < 10 ? "0" + val : val;
                }
                return val;
            },
            separator: ":", //分离符号
            position: 'bottom', //显示位置 top,bottom
            zIndex: 10, //元素的堆叠顺序
            selectedClass: 'bg_theme c_white', //下拉列表滑动和被选中状态的样式
            suggest: false, //是否开启模糊搜索功能
            source: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"] //分离符号后缀数据
        });
    });
    $(function(){
        $("#plug_complete_domain").AKjs_Completer({
            itemSelected: function(val,input,list) {//选择值的回调入口（选择的值，输入框，下拉框元素）
                var url = "http://www." + val;
                input.attr("href", url);
            },
            separator: ".", //分离符号
            position: 'bottom', //显示位置 top,bottom
            zIndex: 10, //元素的堆叠顺序
            selectedClass: 'bg_theme c_white', //下拉列表滑动和被选中状态的样式
            suggest: false, //是否开启模糊搜索功能
            source: ["com", "net", "org", "co", "io", "me", "cn", "com.cn"] //分离符号后缀数据
        });
    });
</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
//注：template，ak-page-code，ak-title，ak-plugin，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-page-code></ak-page-code>
    <ak-title></ak-title>
    <div></div>
    <ak-plugin></ak-plugin>
</template>
<script>
</script>
<style>
</style>
-->
